<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表格 Table | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/components_table.md.6af60abd.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body><div class="bin-tooltip bin-popper is-dark" style="z-index:2217;display:none;" id="bin-popper-9155" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-tooltip bin-popper is-dark" style="z-index:2218;display:none;" id="bin-popper-9711" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-tooltip bin-popper is-dark" style="z-index:2219;display:none;" id="bin-popper-4237" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-tooltip bin-popper is-dark" style="z-index:2220;display:none;" id="bin-popper-4347" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-tooltip bin-popper is-dark" style="z-index:2221;display:none;" id="bin-popper-344" role="tooltip"><!--[--><div>这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2222;display:none;" id="bin-popper-7979" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">1990 年</span><span style="" role="button" class="bin-date-picker__header-label">4 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="prev-month"><div><span>26</span></div></td><td class="prev-month"><div><span>27</span></div></td><td class="prev-month"><div><span>28</span></div></td><td class="prev-month"><div><span>29</span></div></td><td class="prev-month"><div><span>30</span></div></td><td class="prev-month"><div><span>31</span></div></td><td class="available"><div><span>1</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><td class="available"><div><span>4</span></div></td><td class="available"><div><span>5</span></div></td><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><td class="available"><div><span>8</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><td class="available"><div><span>11</span></div></td><td class="available"><div><span>12</span></div></td><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><td class="available"><div><span>15</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><td class="available"><div><span>18</span></div></td><td class="available"><div><span>19</span></div></td><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><td class="available current"><div><span>22</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><td class="available"><div><span>25</span></div></td><td class="available"><div><span>26</span></div></td><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><td class="available"><div><span>29</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>30</span></div></td><td class="next-month"><div><span>1</span></div></td><td class="next-month"><div><span>2</span></div></td><td class="next-month"><div><span>3</span></div></td><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><td class="next-month"><div><span>6</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2223;display:none;" id="bin-popper-6239" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><!--[--><li style="" class="bin-select-dropdown__item selected"><!--[-->吃饭<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->睡觉<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->打豆豆<!--]--></li><!--]--><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2224;display:none;" id="bin-popper-3611" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">1990 年</span><span style="" role="button" class="bin-date-picker__header-label">11 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="prev-month"><div><span>29</span></div></td><td class="prev-month"><div><span>30</span></div></td><td class="prev-month"><div><span>31</span></div></td><td class="available"><div><span>1</span></div></td><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><td class="available"><div><span>4</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>5</span></div></td><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><td class="available"><div><span>8</span></div></td><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><td class="available current"><div><span>11</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>12</span></div></td><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><td class="available"><div><span>15</span></div></td><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><td class="available"><div><span>18</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>19</span></div></td><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><td class="available"><div><span>22</span></div></td><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><td class="available"><div><span>25</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>26</span></div></td><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><td class="available"><div><span>29</span></div></td><td class="available"><div><span>30</span></div></td><td class="next-month"><div><span>1</span></div></td><td class="next-month"><div><span>2</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="next-month"><div><span>3</span></div></td><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><td class="next-month"><div><span>6</span></div></td><td class="next-month"><div><span>7</span></div></td><td class="next-month"><div><span>8</span></div></td><td class="next-month"><div><span>9</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2225;display:none;" id="bin-popper-8423" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><!--[--><li style="" class="bin-select-dropdown__item selected"><!--[-->吃饭<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->睡觉<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->打豆豆<!--]--></li><!--]--><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2226;display:none;" id="bin-popper-8264" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">1985 年</span><span style="" role="button" class="bin-date-picker__header-label">2 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="prev-month"><div><span>28</span></div></td><td class="prev-month"><div><span>29</span></div></td><td class="prev-month"><div><span>30</span></div></td><td class="prev-month"><div><span>31</span></div></td><td class="available"><div><span>1</span></div></td><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>4</span></div></td><td class="available current"><div><span>5</span></div></td><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><td class="available"><div><span>8</span></div></td><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>11</span></div></td><td class="available"><div><span>12</span></div></td><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><td class="available"><div><span>15</span></div></td><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>18</span></div></td><td class="available"><div><span>19</span></div></td><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><td class="available"><div><span>22</span></div></td><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>25</span></div></td><td class="available"><div><span>26</span></div></td><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><td class="next-month"><div><span>1</span></div></td><td class="next-month"><div><span>2</span></div></td><td class="next-month"><div><span>3</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><td class="next-month"><div><span>6</span></div></td><td class="next-month"><div><span>7</span></div></td><td class="next-month"><div><span>8</span></div></td><td class="next-month"><div><span>9</span></div></td><td class="next-month"><div><span>10</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2227;display:none;" id="bin-popper-3161" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><!--[--><li style="" class="bin-select-dropdown__item"><!--[-->吃饭<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->睡觉<!--]--></li><li style="" class="bin-select-dropdown__item selected"><!--[-->打豆豆<!--]--></li><!--]--><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2228;display:none;" id="bin-popper-8864" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">1993 年</span><span style="" role="button" class="bin-date-picker__header-label">7 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="prev-month"><div><span>28</span></div></td><td class="prev-month"><div><span>29</span></div></td><td class="prev-month"><div><span>30</span></div></td><td class="available"><div><span>1</span></div></td><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><td class="available"><div><span>4</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>5</span></div></td><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><td class="available"><div><span>8</span></div></td><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><td class="available current"><div><span>11</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>12</span></div></td><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><td class="available"><div><span>15</span></div></td><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><td class="available"><div><span>18</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>19</span></div></td><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><td class="available"><div><span>22</span></div></td><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><td class="available"><div><span>25</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>26</span></div></td><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><td class="available"><div><span>29</span></div></td><td class="available"><div><span>30</span></div></td><td class="available"><div><span>31</span></div></td><td class="next-month"><div><span>1</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="next-month"><div><span>2</span></div></td><td class="next-month"><div><span>3</span></div></td><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><td class="next-month"><div><span>6</span></div></td><td class="next-month"><div><span>7</span></div></td><td class="next-month"><div><span>8</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2229;display:none;" id="bin-popper-1401" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><!--[--><li style="" class="bin-select-dropdown__item selected"><!--[-->吃饭<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->睡觉<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->打豆豆<!--]--></li><!--]--><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-picker__popper bin-popper is-light is-pure" style="z-index:2230;display:none;" id="bin-popper-9835" role="tooltip"><!--[--><!--[--><div class="bin-picker-panel bin-date-picker" actualvisible="false" unlinkpanels="false"><div class="bin-picker-panel__body-wrapper"><!--[--><!--]--><!----><div class="bin-picker-panel__body"><!----><div style="" class="bin-date-picker__header"><button type="button" aria-label="上一年" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-doubleleft"></i></button><button style="" type="button" aria-label="上个月" class="bin-picker-panel__icon-btn bin-date-picker__prev-btn"><i class="b-iconfont b-icon-left"></i></button><span role="button" class="bin-date-picker__header-label">1999 年</span><span style="" role="button" class="bin-date-picker__header-label">12 月</span><button type="button" aria-label="下一年" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-doubleright"></i></button><button style="" type="button" aria-label="下个月" class="bin-picker-panel__icon-btn bin-date-picker__next-btn"><i class="b-iconfont b-icon-right"></i></button></div><div class="bin-picker-panel__content"><table cellspacing="0" cellpadding="0" class="bin-date-table"><tbody><tr><!----><!--[--><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th><!--]--></tr><!--[--><tr class="bin-date-table__row"><!--[--><td class="prev-month"><div><span>29</span></div></td><td class="prev-month"><div><span>30</span></div></td><td class="available"><div><span>1</span></div></td><td class="available"><div><span>2</span></div></td><td class="available"><div><span>3</span></div></td><td class="available"><div><span>4</span></div></td><td class="available"><div><span>5</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>6</span></div></td><td class="available"><div><span>7</span></div></td><td class="available"><div><span>8</span></div></td><td class="available"><div><span>9</span></div></td><td class="available"><div><span>10</span></div></td><td class="available"><div><span>11</span></div></td><td class="available current"><div><span>12</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>13</span></div></td><td class="available"><div><span>14</span></div></td><td class="available"><div><span>15</span></div></td><td class="available"><div><span>16</span></div></td><td class="available"><div><span>17</span></div></td><td class="available"><div><span>18</span></div></td><td class="available"><div><span>19</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>20</span></div></td><td class="available"><div><span>21</span></div></td><td class="available"><div><span>22</span></div></td><td class="available"><div><span>23</span></div></td><td class="available"><div><span>24</span></div></td><td class="available"><div><span>25</span></div></td><td class="available"><div><span>26</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="available"><div><span>27</span></div></td><td class="available"><div><span>28</span></div></td><td class="available"><div><span>29</span></div></td><td class="available"><div><span>30</span></div></td><td class="available"><div><span>31</span></div></td><td class="next-month"><div><span>1</span></div></td><td class="next-month"><div><span>2</span></div></td><!--]--></tr><tr class="bin-date-table__row"><!--[--><td class="next-month"><div><span>3</span></div></td><td class="next-month"><div><span>4</span></div></td><td class="next-month"><div><span>5</span></div></td><td class="next-month"><div><span>6</span></div></td><td class="next-month"><div><span>7</span></div></td><td class="next-month"><div><span>8</span></div></td><td class="next-month"><div><span>9</span></div></td><!--]--></tr><!--]--></tbody></table><!----><!----></div></div></div><div style="display:none;" class="bin-picker-panel__footer"><button class="bin-button bin-button--mini bin-button--text bin-picker-panel__link-btn" type="button" style=""><!----><span class="bin-button__content" style=""><!--[--> 此刻 <!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini bin-picker-panel__link-btn" type="button"><!----><span class="bin-button__content" style=""><!--[--> 确定 <!--]--></span></button></div></div><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-select__popper bin-popper is-light is-pure" style="z-index:2231;display:none;" id="bin-popper-8749" role="tooltip"><!--[--><div class="bin-select-dropdown" style="min-width:;"><!--[--><div class="bin-scrollbar"><div class="bin-select-dropdown__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-select-dropdown__list" style=""><!--[--><!----><!--[--><!--[--><li style="" class="bin-select-dropdown__item"><!--[-->吃饭<!--]--></li><li style="" class="bin-select-dropdown__item selected"><!--[-->睡觉<!--]--></li><li style="" class="bin-select-dropdown__item"><!--[-->打豆豆<!--]--></li><!--]--><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--[--><p class="bin-select-dropdown__empty">暂无数据</p><!--]--><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-popover bin-popper is-light" style="width:200px;z-index:2232;display:none;" id="bin-popper-5000" role="tooltip"><!--v-if--><!--[--><p><i class="b-iconfont b-icon-question-circle" style="color:var(--bin-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="bin-button bin-button--mini bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini" type="button"><!----><span class="bin-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>通用组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/icon.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-fire"></i>图标<span>Icon</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/button.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-Youtube"></i>按钮<span>Button</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/card.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-creditcard"></i>卡片<span>Card</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/collapse.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-interation"></i>折叠面板<span>Collapse</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/divider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-line"></i>分割线<span>Divider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/dropdown.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-down"></i>下拉菜单<span>Dropdown</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tag.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-tags"></i>标签<span>Tag</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/image.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-image"></i>图片<span>Image</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>布局组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/layout.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-layout"></i>布局组件<span>Layout</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/grid.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore"></i>栅格<span>Grid</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/space.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-swap"></i>间距<span>Space</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/split.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-block"></i>分割面板<span>Split</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据录入组件 (14)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-edit-square"></i>输入框<span>Input</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input-number.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-shake"></i>数字输入<span>InputNumber</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/radio.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-plus-circle"></i>单选框<span>Radio</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/checkbox.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-check-square"></i>多选框<span>Checkbox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/switch.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>开关<span>Switch</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/select.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>选择器<span>Select</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/cascader.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-left"></i>级联选择<span>Cascader</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/date-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar"></i>日期选择器<span>DatePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/time-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-time-circle"></i>时间选择器<span>TimePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/color-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-bg-colors"></i>颜色选择器<span>ColorPicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/rate.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-star"></i>评分<span>Rate</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/slider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>滑块<span>Slider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/upload.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-cloud-upload"></i>上传<span>Upload</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/form.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-reconciliation"></i>表单<span>Form</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据展示组件 (9)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tree.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/table.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-table"></i>表格<span>Table</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/page.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-read"></i>分页<span>Page</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/desc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>描述<span>Desc</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/timeline.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowdown"></i>时间线<span>Timeline</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/calendar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar-fill"></i>日历<span>Calendar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/carousel.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore-fill"></i>轮播<span>Carousel</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/count-to.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-orderedlist"></i>数字动画<span>CountTo</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/trend.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-up"></i>趋势标记<span>Trend</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>导航组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/affix.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pushpin"></i>图钉<span>Affix</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/anchor.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-attachment"></i>锚点<span>Anchor</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/back-top.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-up"></i>返回顶部<span>BackTop</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/breadcrumb.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-right"></i>面包屑<span>Breadcrumb</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading-bar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>加载条<span>Loading Bar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/menu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>菜单<span>Menu</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tabs.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-project"></i>标签页<span>Tabs</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/steps.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowright"></i>步骤<span>Steps</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>反馈组件 (13)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/alert.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-error-fill"></i>警告信息<span>Alert</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/badge.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>标记<span>Badge</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/modal.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-idcard"></i>模态框<span>Modal</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-message"></i>消息提示<span>Message</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message-box.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-mail"></i>弹框提示<span>MessageBox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/notice.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-notification"></i>通知<span>Notice</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tooltip.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-info-circle"></i>弹出提示<span>Tooltip</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popover.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-question-circle"></i>弹出信息<span>Popover</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/drawer.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>抽屉<span>Drawer</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/skeleton.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-sever-fill"></i>骨架屏<span>Skeleton</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-loading"></i>加载<span>Loading</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/progress.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-hourglass"></i>进度条<span>Progress</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/circle.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-redo"></i>进度环<span>Circle</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>内置组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/empty.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>空状态<span>Empty</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/scrollbar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-container"></i>滚动组件<span>Scrollbar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popper.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-center"></i>弹层<span>Popper</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/contextmenu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>右键菜单<span>Contextmenu</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>配置组件 (1)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/config-provider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-setting"></i>全局配置<span>ConfigProvider</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_components_table" data-v-9f9999b2><div><!----><h1 id="表格-table" tabindex="-1">表格 Table <a class="header-anchor" href="#表格-table" aria-label="Permalink to &quot;表格 Table&quot;">​</a></h1><p>基础的表格组件，用于显示列表数据</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Basic.vue" relativepath="./demo/Table/Basic.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="245"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1260"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4194"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4604"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9688"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">age</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.age }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">age</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;{{ row.age }}&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="斑马纹" tabindex="-1">斑马纹 <a class="header-anchor" href="#斑马纹" aria-label="Permalink to &quot;斑马纹&quot;">​</a></h2><p>通过设置<code>stripe</code>来设置斑马纹显示</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Stripe.vue" relativepath="./demo/Table/Stripe.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default bin-table-stripe"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="1894"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="969"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="61"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1149"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9031"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">stripe</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">age</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.age }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">stripe</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">age</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;{{ row.age }}&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="边框" tabindex="-1">边框 <a class="header-anchor" href="#边框" aria-label="Permalink to &quot;边框&quot;">​</a></h2><p>通过设置<code>border</code>来设置斑马纹显示</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Border.vue" relativepath="./demo/Table/Border.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style=""><div class="bin-table bin-table-default bin-table-border"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="8090"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->18<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4952"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->25<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1268"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->30<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3185"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->26<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="677"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="bin-tag" style="color:;"><!----><!--[-->33<!--]--><!----></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">age</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.age }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">age</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;{{ row.age }}&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="超出隐藏" tabindex="-1">超出隐藏 <a class="header-anchor" href="#超出隐藏" aria-label="Permalink to &quot;超出隐藏&quot;">​</a></h2><p>可以通过给<code>columns</code>设置属性<code>tooltip</code>来设置超出隐藏并悬停显示, 如仅有一张表格则可以设置<code>tooltip</code>皮肤<code>tooltip-theme</code>来开启优化样式 （注意：因表格单元格存在超出隐藏样式所以必须将tooltip标签插入至body元素，会成多余标签，如有多个表格缓存则会插入过多标签造成性能问题，所以是否开启需要根据需求确定）</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Tooltip.vue" relativepath="./demo/Table/Tooltip.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-divider bin-divider-horizontal"><span class="bin-divider-inner-text is-left"><!--[-->默认原生title<!--]--></span></div><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style=""><div class="bin-table bin-table-default bin-table-border"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">备注</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="4051"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><span class="bin-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9114"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><span class="bin-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="516"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><span class="bin-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1677"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><span class="bin-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1027"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><span class="bin-table-cell-tooltip-content" title="这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><div class="bin-divider bin-divider-horizontal"><span class="bin-divider-inner-text is-left"><!--[-->开启tooltip<!--]--></span></div><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style=""><div class="bin-table bin-table-default bin-table-border"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">备注</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5886"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="bin-popper-9155" class="bin-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5470"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="bin-popper-9711" class="bin-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7467"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="bin-popper-4237" class="bin-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5531"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="bin-popper-4347" class="bin-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9053"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-tooltip"><!----><!----><!----><!--[--><!--[--><span aria-describedby="bin-popper-344" class="bin-table-cell-tooltip-content" style="">这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。</span><!--teleport start--><!--teleport end--><!--]--><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">align=</span><span style="color: #F6C177">&quot;left&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">默认原生title</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">align=</span><span style="color: #F6C177">&quot;left&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">开启tooltip</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">tooltip-theme</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;dark&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;备注&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;remark&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> tooltip</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    remark</span><span style="color: #908CAA">:</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    remark</span><span style="color: #908CAA">:</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    remark</span><span style="color: #908CAA">:</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    remark</span><span style="color: #908CAA">:</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    remark</span><span style="color: #908CAA">:</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">align</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;left&quot;</span><span style="color: #002339">&gt;默认原生title&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">align</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;left&quot;</span><span style="color: #002339">&gt;开启tooltip&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">tooltip-theme</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;dark&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;备注&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;remark&#39;</span><span style="color: #002339">, tooltip: </span><span style="color: #174781">true</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    remark:</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    remark:</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    remark:</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    remark:</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    remark:</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;这是一段描述文字，文本长度会超出列宽，设置tooltip属性可以设置不换行显示并开启鼠标悬停显示所有文字。&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="固定表头" tabindex="-1">固定表头 <a class="header-anchor" href="#固定表头" aria-label="Permalink to &quot;固定表头&quot;">​</a></h2><p>height 和 maxHeight 可以设置固定表头</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\FixedHeader.vue" relativepath="./demo/Table/FixedHeader.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style="height:200px;"><div class="bin-table bin-table-default bin-table-border bin-table-with-fixed-top"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="767"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="8861"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7571"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2758"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1676"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">height</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;200&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">height</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;200&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="固定表头和列" tabindex="-1">固定表头和列 <a class="header-anchor" href="#固定表头和列" aria-label="Permalink to &quot;固定表头和列&quot;">​</a></h2><p>可以同时固定表头和列</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\FixedColumn.vue" relativepath="./demo/Table/FixedColumn.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:800px;"><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style="height:200px;"><div class="bin-table bin-table-default bin-table-border bin-table-with-fixed-top"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5723"><!--[--><!--[--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4819"><!--[--><!--[--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="274"><!--[--><!--[--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2606"><!--[--><!--[--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2125"><!--[--><!--[--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell bin-table-hidden"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><div class="bin-table-fixed" style="width:149px;left:1px;"><div class="bin-table-fixed-header"><table cellspacing="0" cellpadding="0" border="0" style="width:149px;left:1px;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div class="bin-table-fixed-body" style=""><table cellspacing="0" cellpadding="0" border="0" style="width:149px;left:1px;"><colgroup><!--[--><col width="150"><col width="150"><col width="150"><col width="350"><col width="100"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5723"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4819"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="274"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2606"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2125"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div></div><div class="bin-table-fixed-right" style="width:100px;right:0px;"><div class="bin-table-fixed-header"><table cellspacing="0" cellpadding="0" border="0" style="width:100px;right:0px;"><colgroup><!--[--><col width="100"><col width="150"><col width="150"><col width="150"><col width="350"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class="bin-table-hidden"><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div class="bin-table-fixed-body" style=""><table cellspacing="0" cellpadding="0" border="0" style="width:100px;right:0px;"><colgroup><!--[--><col width="100"><col width="150"><col width="150"><col width="150"><col width="350"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5723"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4819"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="274"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2606"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2125"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><a style="cursor:pointer;">编辑</a><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-hidden"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div></div><div class="bin-table-fixed-right-header" style="width:0px;height:1px;"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 800px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">height</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;200&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">h</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    fixed</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;left&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">150</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">150</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">150</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">350</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;操作&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    fixed</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;right&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">100</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">render</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;a&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> cursor</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pointer&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;编辑&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 800px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">height</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;200&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">h</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    fixed: </span><span style="color: #A44185">&#39;left&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">150</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">150</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">150</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">350</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;操作&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    fixed: </span><span style="color: #A44185">&#39;right&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">100</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">render</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;a&#39;</span><span style="color: #002339">, { style: { cursor: </span><span style="color: #A44185">&#39;pointer&#39;</span><span style="color: #002339"> } }, </span><span style="color: #A44185">&#39;编辑&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="流体高度" tabindex="-1">流体高度 <a class="header-anchor" href="#流体高度" aria-label="Permalink to &quot;流体高度&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\AutoHeight.vue" relativepath="./demo/Table/AutoHeight.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="padding:2px;"><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style="max-height:200px;"><div class="bin-table bin-table-default bin-table-border"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width="350"><col width="100"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class="bin-table-column-center"><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width="350"><col width="100"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="7703"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--mini is-plain" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4121"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--mini is-plain" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->增加一条数据<!--]--></span></button></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;padding: 2px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">max-height</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;200&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">ctrl</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mini&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">plain</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;removeRow(index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">删除</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;add&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">增加一条数据</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">350</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;操作&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;ctrl&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">100</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">add</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">removeRow</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;padding: 2px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">max-height</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;200&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">ctrl</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mini&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">plain</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;removeRow(index)&quot;</span><span style="color: #002339">&gt;删除&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;add&quot;</span><span style="color: #002339">&gt;增加一条数据&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339">, align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">350</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;操作&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;ctrl&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">100</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">add</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">removeRow</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="单选表格" tabindex="-1">单选表格 <a class="header-anchor" href="#单选表格" aria-label="Permalink to &quot;单选表格&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Select.vue" relativepath="./demo/Table/Select.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="2978"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6683"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="268"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4834"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5435"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><div><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->清除单选<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->选中第一行<!--]--></span></button></div><br><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="7254"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3496"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5062"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6845"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1468"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->初始化表格2并默认选中第一行<!--]--></span></button></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">highlight-row-cancel</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">@current-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;clearSelect&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">清除单选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;clickRow(0)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选中第一行</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowTable2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">@current-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">ctrl</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">text-color</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;removeRow(index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">删除</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;init&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">初始化表格2并默认选中第一行</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">nextTick</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">Message</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;操作&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;ctrl&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentRowTable2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">currentRowChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">currentRow</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">oldRow</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">currentRow</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">oldRow</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&gt;=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">Message</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">`选中了第</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #F6C177"> </span><span style="color: #3E8FB0">+</span><span style="color: #F6C177"> </span><span style="color: #EA9A97">1</span><span style="color: #908CAA">}</span><span style="color: #F6C177">行`</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">clearSelect</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clearCurrentRow</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 选中某一行</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">clickRow</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clickCurrentRow</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">init</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">JSON</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">parse</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">JSON</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">stringify</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">nextTick</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">currentRowTable2</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clickCurrentRow</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">removeRow</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">highlight-row-cancel</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">@current-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;clearSelect&quot;</span><span style="color: #002339">&gt;清除单选&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;clickRow(0)&quot;</span><span style="color: #002339">&gt;选中第一行&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowTable2&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns2&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data2&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">@current-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">ctrl</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">text-color</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;removeRow(index)&quot;</span><span style="color: #002339">&gt;删除&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;init&quot;</span><span style="color: #002339">&gt;初始化表格2并默认选中第一行&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">nextTick</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">Message</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;操作&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;ctrl&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentRowTable2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">currentRowChange</span><span style="color: #002339">(</span><span style="color: #B1108E">currentRow</span><span style="color: #002339">, </span><span style="color: #B1108E">oldRow</span><span style="color: #002339">, </span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">currentRow</span><span style="color: #002339">, </span><span style="color: #2F86D2">oldRow</span><span style="color: #002339">, </span><span style="color: #2F86D2">index</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">&gt;=</span><span style="color: #002339"> </span><span style="color: #174781">0</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">Message</span><span style="color: #002339">(</span><span style="color: #A44185">`选中了第${</span><span style="color: #2F86D2">index</span><span style="color: #A44185"> </span><span style="color: #7B30D0">+</span><span style="color: #A44185"> </span><span style="color: #174781">1</span><span style="color: #A44185">}行`</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">clearSelect</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clearCurrentRow</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #357B42; font-style: italic">// 选中某一行</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">clickRow</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clickCurrentRow</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">init</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data2</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">JSON</span><span style="color: #002339">.</span><span style="color: #7EB233">parse</span><span style="color: #002339">(</span><span style="color: #2F86D2">JSON</span><span style="color: #002339">.</span><span style="color: #7EB233">stringify</span><span style="color: #002339">(</span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">nextTick</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">currentRowTable2</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clickCurrentRow</span><span style="color: #002339">(</span><span style="color: #174781">0</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">removeRow</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data2</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="多选表格" tabindex="-1">多选表格 <a class="header-anchor" href="#多选表格" aria-label="Permalink to &quot;多选表格&quot;">​</a></h2><p>通过给 columns 数据设置一项，指定 type: &#39;selection&#39;，即可自动开启多选功能。</p><p>给 data 项设置特殊 key _checked: true 可以默认选中当前项。</p><p>给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。</p><p>@select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。@select-all，点击全选时触发，返回值为 selection，已选项。 @selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\MultiplySelect.vue" relativepath="./demo/Table/MultiplySelect.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="60"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="60"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="3980"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><!----><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6056"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><!----><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3011"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><!----><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6869"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><!----><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4975"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell bin-table-cell-with-selection"><!----><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!----><!----><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->设置全选<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消全选<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->获取选中<!--]--></span></button></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;tableRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">highlight-row</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;$refs.tableRef.selectAll(true)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">设置全选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;$refs.tableRef.selectAll(false)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">取消全选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;getAllSelected&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">获取选中</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;selection&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">60</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">getAllSelected</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">getSelection</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;tableRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">highlight-row</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;$refs.tableRef.selectAll(true)&quot;</span><span style="color: #002339">&gt;设置全选&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;$refs.tableRef.selectAll(false)&quot;</span><span style="color: #002339">&gt;取消全选&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;getAllSelected&quot;</span><span style="color: #002339">&gt;获取选中&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { type: </span><span style="color: #A44185">&#39;selection&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">60</span><span style="color: #002339">, align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">getAllSelected</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">getSelection</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">selected</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="可展开" tabindex="-1">可展开 <a class="header-anchor" href="#可展开" aria-label="Permalink to &quot;可展开&quot;">​</a></h2><p>通过给<code>columns</code> 数据设置一项，指定 <code>type: &#39;expand&#39;</code>，即可开启扩展功能。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Expand.vue" relativepath="./demo/Table/Expand.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="50"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span></span><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">详细地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="50"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><!--[--><tr class="bin-table-row"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-with-expand"><!----><!----><!----><!----><div class="bin-table-cell-expand"><i class="b-iconfont b-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="bin-table-row"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-with-expand"><!----><!----><!----><!----><div class="bin-table-cell-expand"><i class="b-iconfont b-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="bin-table-row"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-with-expand"><!----><!----><!----><!----><div class="bin-table-cell-expand"><i class="b-iconfont b-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="bin-table-row"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-with-expand"><!----><!----><!----><!----><div class="bin-table-cell-expand"><i class="b-iconfont b-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--[--><tr class="bin-table-row"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell bin-table-cell-with-expand"><!----><!----><!----><!----><div class="bin-table-cell-expand"><i class="b-iconfont b-icon-right"></i></div><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!----><!--]--><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">h</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;expand&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">50</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">render</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">params</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;div&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;详细地址：&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">+</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">params</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">address</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;详细地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">h</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    type: </span><span style="color: #A44185">&#39;expand&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    width: </span><span style="color: #174781">50</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">render</span><span style="color: #002339">: </span><span style="color: #B1108E">params</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;div&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;详细地址：&#39;</span><span style="color: #002339"> </span><span style="color: #7B30D0">+</span><span style="color: #002339"> </span><span style="color: #2F86D2">params</span><span style="color: #002339">.</span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">address</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;详细地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="表头分组" tabindex="-1">表头分组 <a class="header-anchor" href="#表头分组" aria-label="Permalink to &quot;表头分组&quot;">​</a></h2><p>columns内容可以设置children来分组渲染表头,合并表头和行列时推荐使用border模式</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\GroupHeader.vue" relativepath="./demo/Table/GroupHeader.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style="height:300px;"><div class="bin-table bin-table-default bin-table-border bin-table-with-fixed-top"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th colspan="1" rowspan="2" class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th colspan="3" rowspan="1" class="bin-table-column-center"><div class="bin-table-cell"><!--[--><span class="">基本信息</span><!----><!--]--></div></th><th colspan="2" rowspan="1" class="bin-table-column-center"><div class="bin-table-cell"><!--[--><span class="">学历信息</span><!----><!--]--></div></th><!--]--><!----></tr><tr><!--[--><th colspan="1" rowspan="1" class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="bin-table-cell"><!--[--><span class="">详细地址</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="bin-table-cell"><!--[--><span class="">毕业院校</span><!----><!--]--></div></th><th colspan="1" rowspan="1" class=""><div class="bin-table-cell"><!--[--><span class="">毕业日期</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="1135"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京河海大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7603"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1935"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海复旦</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="877"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>广东大学</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1696"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="942"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李晓红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>23</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3698"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>郭小宁</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>23</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京交通学院</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2012-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">height</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;300&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;基本信息&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;详细地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;学历信息&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;毕业院校&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;school&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;毕业日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;eduDate&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京河海大学&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京大学&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海复旦&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;广东大学&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京交通学院&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李晓红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">23</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京交通学院&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭小宁&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">23</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    school</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京交通学院&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    eduDate</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">height</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;300&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;基本信息&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;详细地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;学历信息&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;毕业院校&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;school&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;毕业日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;eduDate&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;南京河海大学&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;北京大学&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;上海复旦&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;广东大学&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;南京交通学院&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李晓红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">23</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;南京交通学院&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;郭小宁&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">23</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    school: </span><span style="color: #A44185">&#39;南京交通学院&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    eduDate: </span><span style="color: #A44185">&#39;2012-04-22&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="行列合并" tabindex="-1">行列合并 <a class="header-anchor" href="#行列合并" aria-label="Permalink to &quot;行列合并&quot;">​</a></h2><p>可以设置属性<code>mergeMethod</code>制定合并行或者列的算法，方法参数为四个对象<code>row</code>，<code>column</code>，<code>rowIndex</code>，<code>columnIndex</code>， 该方法返回一个包含两个元素的数组，第一个表示rowspan，第二个为colspan，用于合并单元格 合并表格最好是使用border模式</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Merge.vue" relativepath="./demo/Table/Merge.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide bin-table-wrapper-with-border" style=""><div class="bin-table bin-table-default bin-table-border"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="3348"><!--[--><!--[--><!--[--><td class="" rowspan="2" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6563"><!--[--><!--[--><!--[--><!----><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="8693"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="288"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="2"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><!----><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1403"><!--[--><!--[--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class="" rowspan="1" colspan="1"><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">border</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:merge-method</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSpan&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSpan</span><span style="color: #908CAA">({</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">column</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">rowIndex</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">columnIndex</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">})</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 获取相同姓名的行是，0，1</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">rowIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columnIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      rowspan</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      colspan</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">rowIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columnIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      rowspan</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      colspan</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 合并列，这里将第三行，周小伟的日期和地址合并</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">rowIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columnIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> [</span><span style="color: #EA9A97">1</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">rowIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columnIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> [</span><span style="color: #EA9A97">0</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #207BB8; font-style: italic; font-weight: bold; text-decoration: underline">border</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:merge-method</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSpan&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSpan</span><span style="color: #002339">({ </span><span style="color: #B1108E">row</span><span style="color: #002339">, </span><span style="color: #B1108E">column</span><span style="color: #002339">, </span><span style="color: #B1108E">rowIndex</span><span style="color: #002339">, </span><span style="color: #B1108E">columnIndex</span><span style="color: #002339"> }) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// 获取相同姓名的行是，0，1</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">rowIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">0</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">columnIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">0</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      rowspan: </span><span style="color: #174781">2</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      colspan: </span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">rowIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">columnIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">0</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      rowspan: </span><span style="color: #174781">0</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      colspan: </span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// 合并列，这里将第三行，周小伟的日期和地址合并</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">rowIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">3</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">columnIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">2</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> [</span><span style="color: #174781">1</span><span style="color: #002339">, </span><span style="color: #174781">2</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">rowIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">3</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">columnIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #174781">3</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> [</span><span style="color: #174781">0</span><span style="color: #002339">, </span><span style="color: #174781">0</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="排序表格" tabindex="-1">排序表格 <a class="header-anchor" href="#排序表格" aria-label="Permalink to &quot;排序表格&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Sort.vue" relativepath="./demo/Table/Sort.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="bin-table-cell-sort">年龄</span><span class="bin-table-sort"><i class="b-iconfont b-icon-caret-up"></i><i class="b-iconfont b-icon-caret-down"></i></span><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="1442"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="8677"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9971"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1499"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5807"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> sortable</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339">, sortable: </span><span style="color: #174781">true</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="行内编辑" tabindex="-1">行内编辑 <a class="header-anchor" href="#行内编辑" aria-label="Permalink to &quot;行内编辑&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Edit.vue" relativepath="./demo/Table/Edit.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">爱好</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="171"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>王小明</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>18</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1969"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小刚</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>25</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7731"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>李小红</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>30</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>打豆豆</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5294"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>周小伟</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>26</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>吃饭</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9731"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>张小发</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>33</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>睡觉</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->操作<!--]--></span></button></div><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editName&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.name }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">age</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editAge&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.age }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">birthday</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-date-picker</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editBirthday&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;date&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;选择日期&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-date-picker</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.birthday }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">hobby</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editHobby&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">clearable</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-for</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;(val, key) in hobbyMap&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;key&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;key&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;val&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          {{ val }}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ hobbyMap[row.hobby] }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">address</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editAddress&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ row.address }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">action</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex === index&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;success&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">plain</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSave(index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">保存</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.editIndex = -1&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">取消</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-else</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleEdit(row, index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">操作</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">reactive</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #E0DEF4; font-style: italic">dayjs</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;dayjs&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;爱好&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hobby&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;操作&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;action&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">hobbyMap</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;吃饭&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2&#39;</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;睡觉&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;3&#39;</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;打豆豆&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;3&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">reactive</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  editName</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  editAge</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  editBirthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  editHobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  editAddress</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  editIndex</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleEdit</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editName</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">name</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editAge</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">age</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editHobby</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">hobby</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editAddress</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">address</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editBirthday</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">new</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">Date</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">birthday</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSave</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">]</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">name</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editName</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">]</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">age</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editAge</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">]</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">birthday</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">dayjs</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editBirthday</span><span style="color: #E0DEF4">)</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">format</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;YYYY-MM-DD&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">]</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">hobby</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editHobby</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">]</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">address</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editAddress</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">editIndex</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-input</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editName&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ row.name }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">age</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-input-number</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editAge&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ row.age }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">birthday</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-date-picker</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editBirthday&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;date&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;选择日期&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-date-picker</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ row.birthday }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">hobby</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editHobby&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">clearable</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-for</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;(val, key) in hobbyMap&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;key&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;key&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;val&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          {{ val }}</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ hobbyMap[row.hobby] }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">address</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-input</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editAddress&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;{{ row.address }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">action</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex === index&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;success&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">plain</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSave(index)&quot;</span><span style="color: #002339">&gt;保存&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.editIndex = -1&quot;</span><span style="color: #002339">&gt;取消&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-else</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleEdit(row, index)&quot;</span><span style="color: #002339">&gt;操作&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">reactive</span><span style="color: #002339">, </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> </span><span style="color: #2F86D2">dayjs</span><span style="color: #002339"> </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;dayjs&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;爱好&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;hobby&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;操作&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;action&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">hobbyMap</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> { </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;吃饭&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;2&#39;</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;睡觉&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;3&#39;</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;打豆豆&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;3&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">reactive</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  editName: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  editAge: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  editBirthday: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  editHobby: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  editAddress: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  editIndex: </span><span style="color: #7B30D0">-</span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleEdit</span><span style="color: #002339">(</span><span style="color: #B1108E">row</span><span style="color: #002339">, </span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editName</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">name</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editAge</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">age</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editHobby</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">hobby</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editAddress</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">address</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editBirthday</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7B30D0">new</span><span style="color: #002339"> </span><span style="color: #7EB233">Date</span><span style="color: #002339">(</span><span style="color: #2F86D2">row</span><span style="color: #002339">.</span><span style="color: #2F86D2">birthday</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">index</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSave</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">[</span><span style="color: #2F86D2">index</span><span style="color: #002339">].</span><span style="color: #2F86D2">name</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editName</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">[</span><span style="color: #2F86D2">index</span><span style="color: #002339">].</span><span style="color: #2F86D2">age</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editAge</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">[</span><span style="color: #2F86D2">index</span><span style="color: #002339">].</span><span style="color: #2F86D2">birthday</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">dayjs</span><span style="color: #002339">(</span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editBirthday</span><span style="color: #002339">).</span><span style="color: #7EB233">format</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;YYYY-MM-DD&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">[</span><span style="color: #2F86D2">index</span><span style="color: #002339">].</span><span style="color: #2F86D2">hobby</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editHobby</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">[</span><span style="color: #2F86D2">index</span><span style="color: #002339">].</span><span style="color: #2F86D2">address</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editAddress</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">obj</span><span style="color: #002339">.</span><span style="color: #2F86D2">editIndex</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="编辑表格" tabindex="-1">编辑表格 <a class="header-anchor" href="#编辑表格" aria-label="Permalink to &quot;编辑表格&quot;">​</a></h2><p>编辑表格，只需要开启编辑表格样式，即可开启一中隐藏输入边框的样式，方便进行表格编辑</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Edit2.vue" relativepath="./demo/Table/Edit2.vue"><section class="vitepress-demo-preview-preview"><!--[--><form class="bin-form bin-form--label-top"><!--[--><div class="bin-collapse-wrap bin-collapse-wrap-active" style="box-shadow:none;"><div class="header" style="box-shadow:none;border-bottom:1px solid #eee;"><!--[--><div class="label">编辑表格</div><!--]--><!----><div class="arrow" style=""><!----></div></div><div style="" class="content"><div class="content-box"><!--[--><div style="padding:10px 24px;"><div class="bin-table-wrapper bin-table-hide is-edit-table" style="max-height:420px;"><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="24"><col width=""><col width=""><col width=""><col width=""><col width=""><col width="50"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class="bin-table-column-center"><div class="bin-table-cell"><!--[--><span class=""> </span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">爱好</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class="bin-table-column-center"><div class="bin-table-cell"><!--[--><span class=""> </span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="24"><col width=""><col width=""><col width=""><col width=""><col width=""><col width="50"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5663"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><i class="bin-icon b-iconfont b-icon-drag handle" style=""></i><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="王小明" number="false"><!----><!----><!----><span class="bin-input-icon bin-input-icon-clear"><i class="b-iconfont b-icon-close-circle-fill"></i></span><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-number" type="text"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-plus"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-minus"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="18" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-7979" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="选择日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-6239" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="北京市朝阳区芍药居" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[--><i class="bin-icon b-iconfont b-icon-minus-circle" style=""></i><!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7631"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><i class="bin-icon b-iconfont b-icon-drag handle" style=""></i><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="张小刚" number="false"><!----><!----><!----><span class="bin-input-icon bin-input-icon-clear"><i class="b-iconfont b-icon-close-circle-fill"></i></span><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-number" type="text"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-plus"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-minus"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="25" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-3611" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="选择日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-8423" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="北京市海淀区西二旗" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[--><i class="bin-icon b-iconfont b-icon-minus-circle" style=""></i><!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7002"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><i class="bin-icon b-iconfont b-icon-drag handle" style=""></i><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="李小红" number="false"><!----><!----><!----><span class="bin-input-icon bin-input-icon-clear"><i class="b-iconfont b-icon-close-circle-fill"></i></span><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-number" type="text"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-plus"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-minus"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="30" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-8264" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="选择日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-3161" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="上海市浦东新区世纪大道" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[--><i class="bin-icon b-iconfont b-icon-minus-circle" style=""></i><!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5874"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><i class="bin-icon b-iconfont b-icon-drag handle" style=""></i><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="周小伟" number="false"><!----><!----><!----><span class="bin-input-icon bin-input-icon-clear"><i class="b-iconfont b-icon-close-circle-fill"></i></span><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-number" type="text"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-plus"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-minus"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="26" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-8864" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="选择日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-1401" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="深圳市南山区深南大道" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[--><i class="bin-icon b-iconfont b-icon-minus-circle" style=""></i><!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="5541"><!--[--><!--[--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><i class="bin-icon b-iconfont b-icon-drag handle" style=""></i><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="张小发" number="false"><!----><!----><!----><span class="bin-input-icon bin-input-icon-clear"><i class="b-iconfont b-icon-close-circle-fill"></i></span><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-number" type="text"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-plus"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-minus"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="33" placeholder=""></div></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><!--[--><div class="bin-input-wrapper bin-input-type-text bin-date-editor bin-date-editor--date" aria-describedby="bin-popper-9835" style=""><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-prefix bin-input-with-suffix" placeholder="选择日期" name="" value="" number="false"><span class="bin-input-prefix"><!--[--><i class="b-iconfont b-icon-calendar"></i><!--]--></span><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-select"><!--[--><div class="select-trigger" aria-describedby="bin-popper-8749" style=""><!----><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="请选择" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><div class="bin-form-item is-required"><!--[--><!----><!--]--><div class="bin-form-item__content" style=""><!--[--><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input" placeholder="" value="南京市龙眠大道" number="false"><!----><!----><!----><!----><!----><!--]--></div><!--]--><!----></div></div><!--]--></div></td><!--]--><!--[--><td class="bin-table-column-center"><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[--><i class="bin-icon b-iconfont b-icon-minus-circle" style=""></i><!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><div class="mt-8"><button class="bin-button bin-button--default is-dashed" type="button" style="width:100%;"><span class="bin-button__icon"><!----><i class="b-iconfont b-icon-plus" style=""></i></span><span class="bin-button__content" style=""><!--[-->新增<!--]--></span></button></div></div><!--]--></div></div></div><div class="bin-collapse-wrap bin-collapse-wrap-active" style="box-shadow:none;"><div class="header" style="box-shadow:none;border-bottom:1px solid #eee;"><!--[--><div class="label">只读</div><!--]--><!----><div class="arrow" style=""><!----></div></div><div style="" class="content"><div class="content-box"><!--[--><div style="padding:10px 24px;"><div class="bin-table-wrapper bin-table-hide is-edit-table is-edit-table-detail" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">爱好</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="1356"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[-->吃饭<!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7817"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[-->吃饭<!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3373"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[-->打豆豆<!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2210"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[-->吃饭<!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="2259"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[-->睡觉<!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div></div><!--]--></div></div></div><!--]--></form><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;formRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;85px&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-position</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;top&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-collapse-wrap</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">title</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;编辑表格&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">shadow</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;none&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;padding: 10px 24px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">edit-table</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">no-data-text</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;暂无参数&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">drag-handle</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;.handle&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">max-height</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;420&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">@drag-drop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragDrop&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">handle</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-icon</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;drag&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handle&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;validateRules.name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;index + &#39;.name&#39;&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list[index].name&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">clearable</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">age</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;validateRules.age&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;index + &#39;.age&#39;&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list[index].age&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">arrow-up-icon</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;plus&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">arrow-down-icon</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;minus&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">birthday</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;validateRules.birthday&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;index + &#39;.birthday&#39;&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-date-picker</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list[index].birthday&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;date&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;选择日期&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-date-picker</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">hobby</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;validateRules.hobby&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;index + &#39;.hobby&#39;&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-select</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list[index].hobby&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">clearable</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-option</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-for</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;(val, key) in hobbyMap&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;key&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:value</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;key&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;val&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">                  {{ val }}</span></span>
<span class="line"><span style="color: #E0DEF4">                </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-option</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">address</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;validateRules.address&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;index + &#39;.address&#39;&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list[index].address&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">action</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">text-color</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleRemove(index)&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-icon</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;minus-circle&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-8&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">icon</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;plus&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dashed</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 100%&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleAdd&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">新增</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-collapse-wrap</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-collapse-wrap</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">title</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;只读&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">shadow</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;none&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;padding: 10px 24px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns2&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;list&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">edit-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">edit-table-detail</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">hobby</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">            {{ hobbyMap[row.hobby] }}</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-collapse-wrap</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">reactive</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">nextTick</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">formRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">hobbyMap</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;吃饭&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;睡觉&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;打豆豆&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39; &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;handle&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">24</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;爱好&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hobby&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39; &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;action&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">50</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> align</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;center&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;爱好&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hobby&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">validateRules</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">reactive</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;必填项&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;必填项&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;必填项&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;必填项&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;必填项&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;blur&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">list</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;3&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleAdd</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hobby</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">list</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleRemove</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">list</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragDrop</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">newList</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">newIndex</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">list</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span><span style="color: #3E8FB0">...</span><span style="color: #E0DEF4; font-style: italic">newList</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">nextTick</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clickCurrentRow</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">newIndex</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;formRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;85px&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-position</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;top&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-collapse-wrap</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">title</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;编辑表格&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">shadow</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;none&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;padding: 10px 24px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-table</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">edit-table</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">no-data-text</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;暂无参数&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">drag-handle</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;.handle&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">max-height</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;420&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">@drag-drop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragDrop&quot;</span></span>
<span class="line"><span style="color: #002339">        &gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">handle</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-icon</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;drag&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handle&quot;</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;validateRules.name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;index + &#39;.name&#39;&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list[index].name&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">clearable</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">age</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;validateRules.age&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;index + &#39;.age&#39;&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-input-number</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list[index].age&quot;</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">arrow-up-icon</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;plus&quot;</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">arrow-down-icon</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;minus&quot;</span></span>
<span class="line"><span style="color: #002339">              &gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">birthday</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;validateRules.birthday&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;index + &#39;.birthday&#39;&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-date-picker</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list[index].birthday&quot;</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;date&quot;</span></span>
<span class="line"><span style="color: #002339">                </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;选择日期&quot;</span></span>
<span class="line"><span style="color: #002339">              &gt;&lt;/</span><span style="color: #0444AC">b-date-picker</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">hobby</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;validateRules.hobby&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;index + &#39;.hobby&#39;&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-select</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list[index].hobby&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">clearable</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">                &lt;</span><span style="color: #0444AC">b-option</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-for</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;(val, key) in hobbyMap&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;key&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:value</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;key&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;val&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">                  {{ val }}</span></span>
<span class="line"><span style="color: #002339">                &lt;/</span><span style="color: #0444AC">b-option</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;/</span><span style="color: #0444AC">b-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">address</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;validateRules.address&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;index + &#39;.address&#39;&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-input</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list[index].address&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">action</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">text-color</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleRemove(index)&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">              &lt;</span><span style="color: #0444AC">b-icon</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;minus-circle&quot;</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">            &lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-8&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">icon</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;plus&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">dashed</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 100%&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleAdd&quot;</span><span style="color: #002339">&gt;新增&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-collapse-wrap</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-collapse-wrap</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">title</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;只读&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">shadow</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;none&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;padding: 10px 24px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns2&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;list&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">edit-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">edit-table-detail</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">hobby</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">            {{ hobbyMap[row.hobby] }}</span></span>
<span class="line"><span style="color: #002339">          &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">b-collapse-wrap</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">reactive</span><span style="color: #002339">, </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">nextTick</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">formRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">hobbyMap</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> { </span><span style="color: #174781">1</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;吃饭&#39;</span><span style="color: #002339">, </span><span style="color: #174781">2</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;睡觉&#39;</span><span style="color: #002339">, </span><span style="color: #174781">3</span><span style="color: #002339">: </span><span style="color: #A44185">&#39;打豆豆&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39; &#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;handle&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">24</span><span style="color: #002339">, align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;爱好&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;hobby&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39; &#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;action&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">50</span><span style="color: #002339">, align: </span><span style="color: #A44185">&#39;center&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;爱好&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;hobby&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">validateRules</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">reactive</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  name: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;必填项&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  age: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;必填项&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  birthday: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;必填项&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  hobby: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;必填项&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }],</span></span>
<span class="line"><span style="color: #002339">  address: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;必填项&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;blur&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">list</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;3&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleAdd</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hobby: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">list</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">(</span><span style="color: #2F86D2">row</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleRemove</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">list</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragDrop</span><span style="color: #002339">(</span><span style="color: #B1108E">newList</span><span style="color: #002339">, </span><span style="color: #B1108E">newIndex</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">list</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span><span style="color: #7B30D0">...</span><span style="color: #2F86D2">newList</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">nextTick</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clickCurrentRow</span><span style="color: #002339">(</span><span style="color: #2F86D2">newIndex</span><span style="color: #002339">))</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="拖拽调整顺序" tabindex="-1">拖拽调整顺序 <a class="header-anchor" href="#拖拽调整顺序" aria-label="Permalink to &quot;拖拽调整顺序&quot;">​</a></h2><p>可以设置draggable开启拖拽排序</p><p>注意，设置拖拽排序后，且鼠标拖拽也覆盖了鼠标选中文字，此时可以额外设置也可以设置handle来指定拖拽某一个元素实现</p><p>如需要更新数据，则需使用v-model:data来更新,或配合@drag-drop函数来处理更新数据都可以</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Drag.vue" relativepath="./demo/Table/Drag.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div><p>默认拖拽</p><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="70"><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">ID</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="70"><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="3364"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4743"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3448"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>3</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9724"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>4</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7300"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>5</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><p>实际数据：[
  &quot;1-王小明&quot;,
  &quot;2-张小刚&quot;,
  &quot;3-李小红&quot;,
  &quot;4-周小伟&quot;,
  &quot;5-张小发&quot;
]</p></div><div class="bin-divider bin-divider-horizontal"><!----></div><div><p>如需和单选结合使用，推荐使用drag-drop函数来自定义控制，这样可以更好的实现自定义选中效果</p><p>drag-handle</p><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width="70"><col width="70"><col width=""><col width=""><col width=""><col width=""><col width="120"><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">#</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">ID</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">操作</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width="70"><col width="70"><col width=""><col width=""><col width=""><col width=""><col width="120"><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="3448"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="bin-icon b-iconfont b-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="600"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="bin-icon b-iconfont b-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>2</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="8151"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="bin-icon b-iconfont b-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>3</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="9164"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="bin-icon b-iconfont b-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>4</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4380"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><span class="drag-handle" style="cursor:grab;"><i class="bin-icon b-iconfont b-icon-drag" style="font-size:20px;"></i></span><!--]--></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>5</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!----><!----><!----><!--[--><button class="bin-button bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->编辑<!--]--></span></button><button class="bin-button bin-button--danger bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->删除<!--]--></span></button><!--]--></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><p>实际数据：[
  &quot;1-王小明&quot;,
  &quot;2-张小刚&quot;,
  &quot;3-李小红&quot;,
  &quot;4-周小伟&quot;,
  &quot;5-张小发&quot;
]</p><p>选中行：{}</p></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">默认拖拽</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data1&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns1&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">draggable</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">实际数据：{{ data1.map(v =&gt; v.id + &#39;-&#39; + v.name) }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">如需和单选结合使用，推荐使用drag-drop函数来自定义控制，这样可以更好的实现自定义选中效果</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">drag-handle</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">drag-handle</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;.drag-handle&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@drag-drop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragDrop&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@current-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">handle</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;drag-handle&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;cursor: grab&quot;</span><span style="color: #6E6A86">&gt;&lt;</span><span style="color: #9CCFD8">b-icon</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;drag&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;20&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">ctrl</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click.stop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleEdit(row, index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">编辑</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">text-color</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;danger&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click.stop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;removeRow(index)&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">删除</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">实际数据：{{ data2.map(v =&gt; v.id + &#39;-&#39; + v.name) }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选中行：{{ currentRow }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">p</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">nextTick</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;ID&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;id&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">70</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;handle&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">70</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;ID&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;id&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">70</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;操作&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> slot</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;ctrl&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">120</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">4</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">5</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">4</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">5</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentRow</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">currentRowChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">oldRow</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentRow</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">row</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragDrop</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">newList</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">newIndex</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">oldIndex</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span><span style="color: #3E8FB0">...</span><span style="color: #E0DEF4; font-style: italic">newList</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">nextTick</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clickCurrentRow</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">newIndex</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleEdit</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">row</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">removeRow</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">index</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data2</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">nextTick</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">currentRowTable</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">clearCurrentRow</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;默认拖拽&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data1&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns1&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">draggable</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;实际数据：{{ data1.map(v =&gt; v.id + &#39;-&#39; + v.name) }}&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;如需和单选结合使用，推荐使用drag-drop函数来自定义控制，这样可以更好的实现自定义选中效果&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;drag-handle&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-table</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowTable&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns2&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data2&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">drag-handle</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;.drag-handle&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">highlight-row</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@drag-drop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragDrop&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@current-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentRowChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">handle</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;drag-handle&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;cursor: grab&quot;</span><span style="color: #002339">&gt;&lt;</span><span style="color: #0444AC">b-icon</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">name</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;drag&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;20&quot;</span><span style="color: #002339"> /&gt;&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">ctrl</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">row</span><span style="color: #002339">, </span><span style="color: #2F86D2">index</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click.stop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleEdit(row, index)&quot;</span><span style="color: #002339">&gt;编辑&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">text-color</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;danger&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click.stop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;removeRow(index)&quot;</span><span style="color: #002339">&gt;删除&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;实际数据：{{ data2.map(v =&gt; v.id + &#39;-&#39; + v.name) }}&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;选中行：{{ currentRow }}&lt;/</span><span style="color: #0444AC">p</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">nextTick</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;ID&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;id&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">70</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { slot: </span><span style="color: #A44185">&#39;handle&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">70</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;ID&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;id&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">70</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;操作&#39;</span><span style="color: #002339">, slot: </span><span style="color: #A44185">&#39;ctrl&#39;</span><span style="color: #002339">, width: </span><span style="color: #174781">120</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">1</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">2</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">3</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">4</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">5</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">1</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">2</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">3</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">4</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #174781">5</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentRow</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({})</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">currentRowChange</span><span style="color: #002339">(</span><span style="color: #B1108E">row</span><span style="color: #002339">, </span><span style="color: #B1108E">oldRow</span><span style="color: #002339">, </span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentRow</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">row</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragDrop</span><span style="color: #002339">(</span><span style="color: #B1108E">newList</span><span style="color: #002339">, </span><span style="color: #B1108E">newIndex</span><span style="color: #002339">, </span><span style="color: #B1108E">oldIndex</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data2</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span><span style="color: #7B30D0">...</span><span style="color: #2F86D2">newList</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">nextTick</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clickCurrentRow</span><span style="color: #002339">(</span><span style="color: #2F86D2">newIndex</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleEdit</span><span style="color: #002339">(</span><span style="color: #B1108E">row</span><span style="color: #002339">, </span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">row</span><span style="color: #002339">, </span><span style="color: #2F86D2">index</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">removeRow</span><span style="color: #002339">(</span><span style="color: #B1108E">index</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data2</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">nextTick</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">currentRowTable</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">clearCurrentRow</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="loading状态" tabindex="-1">loading状态 <a class="header-anchor" href="#loading状态" aria-label="Permalink to &quot;loading状态&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Loading.vue" relativepath="./demo/Table/Loading.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="3959"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7146"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7448"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="1820"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4972"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div><br><!--[--><span tabindex="0" class="bin-switch bin-switch-default" style="" ariadescribedby="bin-popper-5000"><input type="hidden" value="false"><span class="bin-switch-inner"><!----><!--[--><!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:loading</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;loading&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">br</span><span style="color: #E0DEF4"> </span><span style="color: #6E6A86">/&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-switch</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;loading&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-switch</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">loading</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">false</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:loading</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;loading&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">br</span><span style="color: #002339"> /&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-switch</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;loading&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-switch</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">loading</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">false</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="大小状态" tabindex="-1">大小状态 <a class="header-anchor" href="#大小状态" aria-label="Permalink to &quot;大小状态&quot;">​</a></h2><p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整表格尺寸为大或小，默认不填或填写 default 。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\Size.vue" relativepath="./demo/Table/Size.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="mb-16"><div class="bin-radio-group bin-radio-group-button" role="radiogroup"><!--[--><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="large" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->松散<!--]--><!----></span></label><label class="bin-radio is-checked" role="radio" aria-checked="true" tabindex="0"><span class="is-checked bin-radio__input"><span class="bin-radio__inner"></span><input checked class="bin-radio__original" value="default" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->默认<!--]--><!----></span></label><label class="bin-radio" role="radio" aria-checked="false" tabindex="-1"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="small" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[-->紧凑<!--]--><!----></span></label><!--]--></div></div><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><tr class="bin-table-row" row-key="5924"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>王小明</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>18</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-04-22</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市朝阳区芍药居</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="3103"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小刚</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>25</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1990-11-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>北京市海淀区西二旗</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="6575"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>李小红</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>30</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1985-02-05</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>上海市浦东新区世纪大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="4307"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>周小伟</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>26</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1993-07-11</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>深圳市南山区深南大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><tr class="bin-table-row" row-key="7834"><!--[--><!--[--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>张小发</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>33</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>1999-12-12</span><!--]--><!----><!----><!----></div></td><!--]--><!--[--><td class=""><div class="bin-table-cell"><!----><!----><!----><!--[--><span>南京市龙眠大道</span><!--]--><!----><!----><!----></div></td><!--]--><!--]--><!--]--></tr><!--]--></tbody></table></div><div style="display:none;" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><!----></td></tr></tbody></table></div><!----><!----><!----></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mb-16&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;tableSize&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;button&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;large&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">松散</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;default&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">默认</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-radio</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">紧凑</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-radio-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;tableSize&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;王小明&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">18</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-04-22&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小刚&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">25</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1990-11-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;李小红&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">30</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1985-02-05&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;周小伟&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">26</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1993-07-11&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;张小发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    age</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">33</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    birthday</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1999-12-12&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    address</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">tableSize</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;default&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mb-16&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;tableSize&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;button&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;large&quot;</span><span style="color: #002339">&gt;松散&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;default&quot;</span><span style="color: #002339">&gt;默认&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-radio</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339">&gt;紧凑&lt;/</span><span style="color: #0444AC">b-radio</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-radio-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;tableSize&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;王小明&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">18</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-04-22&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市朝阳区芍药居&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小刚&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">25</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1990-11-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;北京市海淀区西二旗&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;李小红&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">30</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1985-02-05&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;上海市浦东新区世纪大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;周小伟&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">26</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1993-07-11&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;深圳市南山区深南大道&#39;</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    name: </span><span style="color: #A44185">&#39;张小发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    age: </span><span style="color: #174781">33</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    birthday: </span><span style="color: #A44185">&#39;1999-12-12&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    address: </span><span style="color: #A44185">&#39;南京市龙眠大道&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">tableSize</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;default&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="无数据" tabindex="-1">无数据 <a class="header-anchor" href="#无数据" aria-label="Permalink to &quot;无数据&quot;">​</a></h2><p>noDataText可以设置无数据状态</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Table\NoData.vue" relativepath="./demo/Table/NoData.vue"><section class="vitepress-demo-preview-preview"><!--[--><div class="bin-table-wrapper bin-table-hide" style=""><div class="bin-table bin-table-default"><div class="bin-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width:NaNpx;"><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--><!----></colgroup><thead><!--[--><tr><!--[--><th class=""><div class="bin-table-cell"><!--[--><span class="">姓名</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">年龄</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">出生日期</span><!----><!--]--></div></th><th class=""><div class="bin-table-cell"><!--[--><span class="">地址</span><!----><!--]--></div></th><!--]--><!----></tr><!--]--></thead></table></div><div style="display:none;" class="bin-table-body"><table cellspacing="0" cellpadding="0" border="0" style=""><colgroup><!--[--><col width=""><col width=""><col width=""><col width=""><!--]--></colgroup><tbody class="bin-table-tbody"><!--[--><!--]--></tbody></table></div><div style="" class="bin-table-tip"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width:0px;"><div class="bin-empty bin-empty-normal"><div class="bin-empty-image"><!--[--><svg class="bin-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="bin-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="bin-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="bin-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="bin-empty-description"><!--[-->No Data<!--]--></p></div></td></tr></tbody></table></div><!----><!----><!----></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-table</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:columns</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;columns&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">no-data-text</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;No Data&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-table</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">columns</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;姓名&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;name&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;年龄&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;age&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;出生日期&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;birthday&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;地址&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> key</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;address&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">b-table</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:columns</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;columns&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">no-data-text</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;No Data&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-table</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">columns</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;姓名&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;name&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;年龄&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;age&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;出生日期&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;birthday&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">  { title: </span><span style="color: #A44185">&#39;地址&#39;</span><span style="color: #002339">, key: </span><span style="color: #A44185">&#39;address&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="table-props" tabindex="-1">Table props <a class="header-anchor" href="#table-props" aria-label="Permalink to &quot;Table props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>data</td><td>显示的结构化数据，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>columns</td><td>表格列的配置描述，具体项见后文</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>stripe</td><td>间隔斑马纹</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>border</td><td>纵向边框</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>show-header</td><td>是否显示表头</td><td>Boolean</td><td>false/true</td><td>false</td></tr><tr><td>width</td><td>表格宽度，单位 px</td><td>Number/String</td><td>—</td><td>auto</td></tr><tr><td>height</td><td>表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头</td><td>Number/String</td><td>—</td><td>—</td></tr><tr><td>max-height</td><td>最大表格高度</td><td>Number/String</td><td>—</td><td>—</td></tr><tr><td>loading</td><td>表格加载状态</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>disabled-hover</td><td>禁用悬停高亮</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>highlight-row</td><td>是否支持高亮选中的行，即单选</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>highlight-row-cancel</td><td>单选高亮是否可以取消，如果是则再次点击选中的行会取消选中</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>表格尺寸</td><td>string</td><td>large / small</td><td>default</td></tr><tr><td>no-data-text</td><td>空数据内容</td><td>string</td><td>—</td><td>暂无数据</td></tr><tr><td>loading-text</td><td>加载数据文字</td><td>string</td><td>—</td><td>正在加载</td></tr><tr><td>draggable</td><td>开启拖拽调整行顺序，同步元数据需要使用v-model:data使用或需配合 @drag-drop 事件更新data都可以</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>drag-handle</td><td>拖拽的handle图标</td><td>String</td><td>—</td><td>—</td></tr><tr><td>row-key</td><td>是否强制使用内置row-key刷新</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>merge-method</td><td>表格合并行列的方法函数</td><td>Function</td><td>—</td><td>false</td></tr></tbody></table><h2 id="table-events" tabindex="-1">Table events <a class="header-anchor" href="#table-events" aria-label="Permalink to &quot;Table events&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>current-change</td><td>开启 highlight-row 后有效，当表格的当前行发生变化的时候会触</td><td>currentRow, oldCurrentRow,index</td></tr><tr><td>select</td><td>在多选模式下有效，选中某一项时触发</td><td>已选项, 刚选择</td></tr><tr><td>select-cancel</td><td>在多选模式下有效，取消选中某一项时触发</td><td>已选项, 取消选择</td></tr><tr><td>select-all</td><td>全选时触发</td><td>已选项</td></tr><tr><td>select-all-cancel</td><td>取消全选时触发</td><td>已选项</td></tr><tr><td>selection-change</td><td>选中项发生变化时就会触发</td><td>已选项</td></tr><tr><td>sort-change</td><td>排序时有效，当点击排序时触发</td><td>column：当前列数据 key：排序依据的指标 order(值为 asc 或 desc)</td></tr><tr><td>row-click</td><td>单击某一行时触发</td><td>当前行的数据,index</td></tr><tr><td>row-dblclick</td><td>双击某一行时触发</td><td>当前行的数据,index</td></tr><tr><td>expand</td><td>展开或收起某一行时触</td><td>row：当前行的数据,status：当前的状态</td></tr><tr><td>drag-drop</td><td>拖拽排序松开时触发</td><td>置换的两行数据索引和更新后的数据 newData, newIndex, oldIndex</td></tr></tbody></table><h2 id="table-slot" tabindex="-1">Table slot <a class="header-anchor" href="#table-slot" aria-label="Permalink to &quot;Table slot&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>header</td><td>表头</td></tr><tr><td>footer</td><td>页脚</td></tr><tr><td>loading</td><td>警告提加载中示内容</td></tr></tbody></table><h2 id="table-methods" tabindex="-1">Table methods <a class="header-anchor" href="#table-methods" aria-label="Permalink to &quot;Table methods&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>clickCurrentRow</td><td>选中某一项</td><td>index</td></tr><tr><td>clearCurrentRow</td><td>清除高亮项，仅在开启</td><td>无</td></tr><tr><td>handleResize</td><td>刷新表格的宽高</td><td>无</td></tr><tr><td>getSelection</td><td>获取已经选中的行</td><td>无</td></tr></tbody></table><h2 id="column" tabindex="-1">column <a class="header-anchor" href="#column" aria-label="Permalink to &quot;column&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>列类型</td><td>String</td><td>index、selection、expand、html String</td><td>-</td></tr><tr><td>title</td><td>列头显示文字</td><td>String</td><td>-</td><td>#</td></tr><tr><td>key</td><td>对应列内容的字段名</td><td>String</td><td>-</td><td>-</td></tr><tr><td>width</td><td>列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>minWidth</td><td>最小列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>maxWidth</td><td>最大列宽</td><td>Number</td><td>-</td><td>-</td></tr><tr><td>align</td><td>对齐方式</td><td>String</td><td>right,center</td><td>left</td></tr><tr><td>className</td><td>列的样式名称</td><td>String</td><td>-</td><td>-</td></tr><tr><td>fixed</td><td>列是否固定在左侧或者右侧</td><td>String</td><td>left,right</td><td>-</td></tr><tr><td>ellipsis</td><td>开启后，文本将不换行</td><td>Boolean</td><td>-</td><td>false</td></tr><tr><td>tooltip</td><td>开启后，文本将不换行,并用 Tooltip 组件显示完整内容</td><td>Boolean</td><td>-</td><td>false</td></tr><tr><td>render</td><td>自定义渲染列 ,第一个是 h，第二个为对象，包含 row、column 和 index</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>indexMethod</td><td>type 为 index 时可用，自定义序号 ,参数 row 为当前行内容</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>sortable</td><td>对应列是否可以排序</td><td>Boolean ,&#39;custom&#39;</td><td>-</td><td>false</td></tr><tr><td>sortMethod</td><td>自定义排序使用的方法,三个参数 a 、 b 和 type</td><td>Function</td><td>-</td><td>-</td></tr><tr><td>sortType</td><td>设置初始化排序。值为 asc 和 desc</td><td>String</td><td>-</td><td>-</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/components/tree.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/components/page.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-read"></i>分页<span>Page</span></span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>